<template lang="">
  <view class="emoji">
    <scroll-view scroll-y class="scroll">
      <view class="icons">
        <view class="img" v-for="item in emojis" :key="item.id" @click="onTap(item.value)">
          <image class="icon-image" :src="item.url" />
        </view>
      </view>
      <view style="height:148rpx;"></view>
    </scroll-view>
    <view class="btn-box">
      <view class="btn-del" @click="onDel">
        <u-icon name="backspace" color="#d8d8d8" size="78rpx"></u-icon>
      </view>
    </view>
  </view>
</template>
<script>
import { emojis } from "@/store/emoji.js"
export default {
  props: {
    hide: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      emojis: emojis
    }
  }, 
  methods: {
    onTap(val) {
      this.$emit("emoji", val)
    },
    onDel() {
      this.$emit("del") 
    }
  },
}
</script>
<style lang="scss">
  .emoji {

    width: 100%;
    transition: all 0.3s;
    z-index: 10005;
    height: 550rpx;

  .icons {
    display: flex;
    flex-wrap: wrap;
    margin-left: 24rpx;
    justify-content: flex-start;
    .img {
      // flex-grow: 1;
      padding: 20rpx;
      text-align: left;
      justify-items: flex-start;
      .icon-image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
  .scroll {
    background: #f8f8f8;
    height: 550rpx;
  }
  .btn-box {
    right: 20rpx;
    bottom: 20rpx;
    position: fixed;
    background: #ffffff;
    border-radius: 20rpx;
    .btn-del {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 16rpx 24rpx;
    }
  }
  .icon-loading {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>